<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content tickets" >
      <e-heading>购票列表</e-heading>
      <el-form v-bind="getFormProps()" :inline="true"  >
        <el-form-item label="时间：">
          <el-date-picker 
            size="small"
            type="daterange"
            placeholder="请选择购票日期"
            v-model="dateRange" >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="票务名称：">
          <el-input size="small" v-model="query.name"></el-input>
        </el-form-item>
        <el-button size="small" type="primary-plain" native-type="submit">搜索</el-button>
      </el-form>

      <el-table v-if='tickets_list' :data="tickets_list.list" v-bind="getTableProps()">
        <el-table-column  label="票务名称" width="187">
          <template slot-scope="scope">
            <span>{{ scope.row.ticketName }}</span>
            <div class='name-tips' v-if='scope.row.skuItems'>
              <span v-for="(skuItems,index) in scope.row.skuItems" :key="skuItems">
                {{skuItems}}
                <span>{{(index + 1) < (scope.row.skuItems.length) ? '--' : ''}}</span>
              </span>
            </div>
          </template>
        </el-table-column>

        <el-table-column  label="买家昵称"  width="92" >
          <template slot-scope="scope">
            <span>{{ scope.row.buyerNickName }}</span>
          </template>
        </el-table-column>

        <el-table-column  label="姓名"  width="58">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column  label="手机号"  width="96">
          <template slot-scope="scope">
            <span>{{ scope.row.mobile }}</span>
          </template>
        </el-table-column>

        <el-table-column  label="证件号" width="70">
          <template slot-scope="scope">
            <span>{{ scope.row.idNo }}</span>
          </template>
        </el-table-column>

        <el-table-column  label="详细地址"  >
          <template slot-scope="scope">
            <span>{{ scope.row.address }}</span>
          </template>
        </el-table-column>

        <el-table-column  label="数量"  align="center quantity" width="46" >
          <template slot-scope="scope">
            <span>{{ scope.row.quantity }}</span>
          </template>
        </el-table-column>

        <el-table-column  label="支付时间"  align="center" width="90" >
          <template slot-scope="scope">
            <span>{{ scope.row.paidTime | FormatDate('yyyy-MM-dd HH:mm') }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center"  width="78" >
          <template slot-scope="scope">
            <router-link  style="color:#3983e5;" 
            :to="{name: 'orderDetail', params: {id:scope.row.orderId}}"  
            target="_blank"
            >
            查看订单
            </router-link>
          </template>
        </el-table-column>
      </el-table>

      <div  style="padding-top:34px;text-align:center;" v-if='tickets_list && tickets_list.list.length' >
        <el-button type="primary" @click='exportExcel'>导出Excel</el-button>
      </div>

      <div class="block">
        <el-pagination
          v-bind="getPaginationProps(tickets_list)"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { downloadFile } from 'utils'
import { pagingList } from 'utils/mixins'
export default {
  mixins: [pagingList],
  computed: {
    ...mapGetters({
      tickets_list: 'tickets_list'
    }),
    dateRange: {
      set (value) {
        this.dateRangeMid = value
        this.query.startTime = value ? (value[0] === null ? '' : (new Date(value[0])).getTime()) : ''
        this.query.endTime = value ? (value[1] === null ? '' : new Date(value[1]).getTime() + 86400000 - 1) : ''
      },
      get () {
        return this.dateRangeMid
      }
    }
  },
  data () {
    return {
      query: this.getQuery(),
      dateRangeMid: [],
      fileUrl: ''
    }
  },
  watch: {
    query (value) {
      this.setTime(value)
    }
  },
  mounted () {
    this.setTime(this.$route.query)
  },
  methods: {
    setTime (value) {
      let startTime = value.startTime ? new Date(Number(value.startTime)) : ''
      let endTime = value.endTime ? new Date(Number(value.endTime)) : ''
      this.dateRangeMid = [startTime, endTime]
    },
    exportExcel () {
      // let fileName = `${this.query.name ? `票名-${this.query.name}-` : ''}${this.query.startTime ? `时间-${this.FormatDate(this.query.startTime, 'yyyy-MM-dd')}` : ''}${this.query.endTime ? ` -- ${this.FormatDate(this.query.endTime, 'yyyy-MM-dd')}` : ''}购票列表.xls`
      let fileName = `购票列表${this.FormatDate(new Date(), 'yyyyMMdd')}.xls`
      let url = `/api/ticket/export/ticketList?name=${this.query.name ? this.query.name : ''}&startTime=${this.query.startTime ? this.query.startTime : ''}&endTime=${this.query.endTime ? this.query.endTime : ''}`
      downloadFile(url, fileName)
    },
    FormatDate (date, type) {
      if (!date) return ''
      date = typeof date === 'number' ? new Date(date) : new Date(Number(date))
      type = type || 'yyyy-MM-dd HH:mm:ss'
      let obj = {
        'y': date.getFullYear(), // 年份，注意必须用getFullYear
        'M': date.getMonth() + 1, // 月份，注意是从0-11
        'd': date.getDate(), // 日期
        'q': Math.floor((date.getMonth() + 3) / 3), // 季度
        'w': date.getDay(), // 星期，注意是0-6
        'H': date.getHours(), // 24小时制
        'h': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 12小时制
        'm': date.getMinutes(), // 分钟
        's': date.getSeconds(), // 秒
        'S': date.getMilliseconds() // 毫秒
      }
      let week = ['天', '一', '二', '三', '四', '五', '六']
      for (let i in obj) {
        type = type.replace(new RegExp(i + '+', 'g'), function (m) {
          let val = obj[i] + ''
          if (i === 'w') return (m.length > 2 ? '星期' : '周') + week[val]
          for (let j = 0, len = val.length; j < m.length - len; j++) val = '0' + val
          return m.length === 1 ? val : val.substring(val.length - m.length)
        })
      }
      return type
    },
    fetch (query) {
      this.$store.dispatch('tickets_list', query)
    }
  }
}
</script>

<style lang="scss" >

.tickets{

}
</style>
